<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
</head>
<body>
<img id="img1" style="cursor:pointer;width:128px;height:128px" src="${pageContext.request.contextPath}/image/pic_add.png"
 alt="" onclick="t_file1.click()"/>
<input type="hidden" name="file1" value=""> 
<hr>
<img id="img2" style="cursor:pointer;width:128px;height:128px" src="${pageContext.request.contextPath}/image/pic_add.png"
 alt="" onclick="t_file2.click()"/>
<input type="hidden" name="file2" value=""> 
<hr>



<form id="uploadForm1" method="post" enctype="multipart/form-data">
	<input id="t_file1" name="t_file1" type="file" style="display:none" onchange="change(1);">
</form>
<form id="uploadForm2" method="post" enctype="multipart/form-data">
	<input id="t_file2" name="t_file2" type="file" style="display:none" onchange="change(2);">
</form>

</body>
<script type="text/javascript">
function change(num){
	$("#uploadForm"+num).ajaxSubmit({
		type:"post",
		url:"${pageContext.request.contextPath}/api/upload.do",
		dataType:"json",
		success:function(obj){
			$("#img"+num).attr("src",'${pageContext.request.contextPath}'+"/"+obj.data);
			$("#img"+num).next().val(obj.data);
		}
	});
}
</script>
</html>